﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多格式点云浏览器</title>
    <link rel="stylesheet" href="pointcloud-viewer.css">
    <script type="importmap">
        {
            "imports": {
                "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
                "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/"
            }
        }
    </script>
    <script type="module" src="pointcloud-viewer.js" defer></script>
</head>
<body>
    <div class="page">
        <header class="hero">
            <div>
                <p class="badge">实验功能 · 本地离线解析</p>
                <h1>多格式点云浏览器</h1>
                <p class="subtitle">支持 PCD / PLY / XYZ / TXT (XYZRGB) 等常见点云文件，直接在浏览器内完成预览与调整。</p>
            </div>
            <div class="hero-actions">
                <label class="upload-btn">
                    <input type="file" id="file-input" accept=".pcd,.ply,.xyz,.txt,.csv,.bin" hidden>
                    <span>选择文件</span>
                </label>
                <button id="reset-view" class="ghost-btn">重置视角</button>
            </div>
        </header>

        <main class="layout">
            <section class="panel">
                <h2>文件与统计</h2>
                <div class="info-list">
                    <div>
                        <p class="label">当前文件</p>
                        <p id="file-name" class="value muted">未加载</p>
                    </div>
                    <div>
                        <p class="label">点数</p>
                        <p id="point-count" class="value">0</p>
                    </div>
                    <div>
                        <p class="label">范围 (XYZ)</p>
                        <p id="bounds" class="value">-</p>
                    </div>
                </div>

                <div class="dropzone" id="dropzone">
                    <div class="icon">⤓</div>
                    <p>拖拽点云文件到此处</p>
                    <small>支持 .pcd .ply .xyz .txt (xyz rgb) .csv .bin</small>
                </div>
                <div class="divider"></div>

                <h3>渲染控制</h3>
                <label class="control">
                    <span>点大小</span>
                    <input type="range" id="point-size" min="0.01" max="5" step="0.01" value="0.1">
                </label>

                <label class="control">
                    <span>背景</span>
                    <select id="background">
                        <option value="#111827">深灰</option>
                        <option value="#000000">纯黑</option>
                        <option value="#ffffff">纯白</option>
                        <option value="#0f172a">夜空</option>
                    </select>
                </label>

                <label class="control">
                    <span>高度映射色板</span>
                    <select id="colormap">
                        <option value="height">按高度渐变</option>
                        <option value="intensity">按强度亮度</option>
                        <option value="single">统一颜色</option>
                    </select>
                </label>

                <label class="control checkbox">
                    <input type="checkbox" id="show-grid" checked>
                    <span>显示地面网格</span>
                </label>
                <label class="control checkbox">
                    <input type="checkbox" id="show-bbox" checked>
                    <span>显示包围盒</span>
                </label>
            </section>

            <section class="viewport">
                <canvas id="viewer"></canvas>
                <div class="status" id="status">等待文件...</div>
            </section>
        </main>
    </div>
</body>
</html>
